<template>
  <a-modal
    title="编辑横幅信息"
    width="45%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-upload
            v-decorator="['bannerImageUrl', {
              initialValue: banner.bannerImageUrl,
              rules: [{ required: true, message: '请上传图片' }] },
            ]"
            name="bannerImageUrl"
            class="avatar-uploader"
            list-type="picture-card"
            :show-upload-list="false"
            :before-upload="handleBeforeUpload"
          >
            <img
              v-if="!!bannerImageUrl"
              :src="imageUrlPrefix + bannerImageUrl"
              alt="bannerImageUrl"
              style="max-width: 100%;"
            />
            <div v-else>
              <a-icon :type="confirmLoading ? 'loading' : 'plus'" />
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="位置"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select
            v-decorator="['location', {
              initialValue: banner.location,
              rules: [{ required: true, message: '请选择横幅位置' }] },
            ]"
            placeholder="请选择横幅位置"
          >
            <a-select-option value="1">
              小程序首页顶部
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="跳转 URL"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="请输入跳转的 URL"
            v-decorator="['routeUrl', {
              initialValue: banner.routeUrl,
              rules: [{required: true, message: '请输入正确的 URL 格式'}]}]"
          />
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-textarea
            placeholder="请输入备注"
            v-decorator="['remark', {
              initialValue: banner.remark,
              rules: [{required: true, message: '请输入备注'}]}]"
          />
        </a-form-item>
      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
import { uploadImage } from '@/api/manage'
import config from '@/config/defaultSettings'

const initialBannerValue = {
  bannerImageUrl: '',
  location: '',
  routeUrl: '',
  remark: ''
}

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      form: this.$form.createForm(this),
      visible: false,
      confirmLoading: false,
      confirmAction: null,
      banner: initialBannerValue,
      imageUrlPrefix: config.uploadedUrlPrefix,
      bannerImageUrl: ''
    }
  },
  methods: {
    handleBeforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      this.file = file
      if (!isJpgOrPng) {
        this.$message.error('只能上传JPG或PNG图片！')
      }
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('图片需小于10M')
      }
      if (isJpgOrPng && isLt2M) {
        this.handleFileUpload(file)
      }
      return false
    },
    handleFileUpload (file) {
      const formData = new FormData()
      formData.append('imageFile', file)
      this.confirmLoading = true
      uploadImage(formData).then(res => {
        const bannerImageUrl = res.resData.result || ''
        this.form.setFieldsValue({ bannerImageUrl })
        this.bannerImageUrl = bannerImageUrl
      }).catch(() => {
        this.$message.error('上传失败，请重试')
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    handleSubmit () {
      const { confirmAction, form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          confirmAction({ ...this.banner, ...values }, () => {
            this.confirmLoading = false
            this.handleCancel()
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    show (confirmAction, banner = initialBannerValue) {
      this.visible = true
      this.confirmAction = confirmAction
      this.banner = banner
      this.bannerImageUrl = banner.bannerImageUrl
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
